<template>
	<view class="adup-route-bz">
		<u-form :model="fm.ps" :ref="fm.fname" :rules="rules" :error-type="['toast']">
			<view class="my-fm" :style="{'padding-top': '0rpx'}">
				<view class="f-item no-box" :style="{'padding-top': '85rpx'}">
					<view class="f-item-title"
						:style="{'position': 'fixed', 'top': '-4rpx', 'width': 'calc(100% - 50rpx)', 'padding-left': '20rpx'}">
						<label class="r-l-icon" :style="{'background': '#ff6300', 'left': '0rpx'}"></label>
						车队回访旅游包车咨询
						<view class="r-r-con">
							<u-button :hover-class="'none'" :custom-style="fm.sb.cancleBtnSy" @click="closeMd">
								<u-icon name="arrow-leftward" color="#ff6300"></u-icon>返回
							</u-button>
							<u-button :ripple="true" :hover-class="'none'" :custom-style="fm.sb.okBtnSty"
								:loading="fm.sb.load" @click="submitFm">
								<u-icon name="edit-pen-fill" color="#fff"></u-icon>提交
							</u-button>


						</view>
					</view>

					
					<u-form-item prop="teamAdviceTime">
						<view class="i-row">
							<view class="r-title">回访时间:</view>
							<view class="r-con">
								<!-- @click="teamAdviceTime_off = true" -->
								<u-input  :type="'select'" disabled
									v-model="fm.ps.teamAdviceTime" :input-align="'right'" :clearable="false"
									:custom-style="{'color': '#00C3CE'}" :placeholder="'请输入回访时间'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="teamAdviceStatus">
						<view class="i-row">
							<view class="r-title">回访结果:</view>
							<view class="r-con">
								<u-input @click="teamAdviceStatus_off = true" disabled v-model="fm.teamAdviceStatus"
									:type="'select'" :input-align="'right'" :clearable="false"
									:custom-style="{'color': '#00C3CE'}" :placeholder="'请输入回访结果'" />
							</view>
						</view>
					</u-form-item>
					<u-form-item v-if="fm.teamAdviceStatus == '成交客户'">
						<view @click="show = true" class="i-row">
							<view class="r-title">车队:</view>
							<view class="r-con">
								<u-input @click="show = true" v-model="fm.teamUserIdDeal" :type="'select'"
									:input-align="'right'" :clearable="false" :custom-style="{'color': '#00C3CE'}"
									placeholder="请选择车队" />
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="teamAdviceDetails">
						<view class="i-row">
							<view class="r-title">回访详情:</view>

						</view>
						<view class="r-con">
							<u-input :border="true" v-model="fm.ps.teamAdviceDetails " :type="'textarea'"
								:auto-height="true" :height="200" :clearable="false"
								:custom-style="{'color': '#00C3CE'}" :placeholder="'请输入回访详情'" />
						</view>
					</u-form-item>




				</view>
			</view>
		</u-form>
		<view class="picker_css" v-if="show">
			<view style="display: flex;justify-content: space-around;margin-top: 10rpx;">
				<view style="width: 70vw;">
					<u-input @input="onChange" v-model="curval1" border='true' :placeholder="'请输入关键字搜索并选择'"
						:maxlength="30" :margin="'16rpx'" @change="onChange"></u-input>
				</view>
				<view style="width: 20vw;">
					<u-button @click="onChange" type="primary">搜索</u-button>
				</view>
			</view>

			<view v-if='findComboCusList.length >0' class="list-content">
				<view class="point-item" v-for="(it, index) in findComboCusList" :key="index" :data-obj="it"
					@click="picker_confirm1(it)">
					<view class="point-name">
						<u-icon name="map" :color="'#00c3ce'" size="20"></u-icon>
						{{it.cusCompanySimpleName}}
					</view>
					<view class="point-address">{{it.cusRealName+'-'+it.cusPhone}}</view>
					<!-- 	<u-icon class="point-collect" size="40" name="star" color="#999"></u-icon> -->
				</view>
			</view>
			<view v-else class="list-content">
				<view style="font-weight: 700;margin-top: 200rpx;font-size: 60rpx;text-align: center;">
					暂无数据,</view>
			</view>
		</view>
		<u-picker @confirm='teamAdviceTime_confirm' mode="time" v-model="teamAdviceTime_off"
			:params="params"></u-picker>
		<u-select :label-name='"label"' :value-name='"id"' :list="teamAdviceStatus_list" v-model="teamAdviceStatus_off"
			@confirm="teamAdviceStatus_confirm"></u-select>
	</view>
</template>

<script>
	export default {
		name: "offline-vehicle-dispatch",


		data() {
			return {
				teamAdviceStatus_off: false,
				teamAdviceStatus_list: [{
					id: 'NORMAL',
					label: '普通客户',

				}, {
					id: 'INTENTION',
					label: '意向客户',

				}, {
					id: 'DEAL',
					label: '成交客户',

				}, ],
				curval1: '',
				carCompanyId_off: true,
				teamAdviceTime_off: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				id: '',
				// 维修详情输入框样式
				inpBtnStyl: {
					'color': '#00C3CE',
					'padding-right': '30rpx'
				},
				// 车队列表
				findComboCusList: [],
				show: false,
				// 表单对象
				fm: {
					fname: 'offlinevehicledispatch',
					sb: {
						load: false,
						text: '添加',
						okBtnSty: {
							'background-color': '#00C3CE',
							'color': '#FFFFFF',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						},
						cancleBtnSy: {
							'color': '#ff6300',
							'margin-left': '10rpx',
							'height': '66rpx',
							'font-size': '30rpx',
							'padding': '0 20rpx',
						}
					},
					// 参数对象
					teamUserIdDeal: '',
					teamAdviceStatus: '',
					ps: {
						id: '',
						teamAdviceDetails: '',
						teamAdviceStatus: '',
						teamAdviceTime: '',
						teamUserIdDeal: '',

					},

				},
				// 验证对象
				rules: {

					
					teamAdviceTime: [{
						required: true,
						message: '请选择回访时间',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					teamAdviceStatus: [{
						required: true,
						message: '请选择回访结果',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					teamAdviceDetails: [{
						required: true,
						message: '请输入详情',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],

				},


			}
		},


		mounted() {
			let that = this
			that.fm.ps.teamAdviceTime = that.newdate()
			that.curval1 = '',
				that.$u.api.findComboCusList({
					page: {
						pageNum: 1,
						pageSize: 999,
					},
					find: that.curval1,
					cusTypeMark: 'CARTEAM',
				}).then(res => {
					if (res.code == 1) {
						that.findComboCusList = res.data


					}
				});
		},
		created() {


		},
		onReady() {
			this.$refs.offlinevehicledispatch.setRules(this.rules);
		},
		onLoad(e) {
			let that = this
			that.fm.ps.id = e.id
		},
		methods: {
			newdate(){
				 let now = new Date();
				
				    let year = now.getFullYear();
				    let month = String(now.getMonth() + 1).padStart(2, '0');
				    let day = String(now.getDate()).padStart(2, '0');
				    let hours = String(now.getHours()).padStart(2, '0');
				    let minutes = String(now.getMinutes()).padStart(2, '0');
				    let seconds = String(now.getSeconds()).padStart(2, '0');
				
				    let currentDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				    return currentDateTime
			},
			
			teamAdviceStatus_confirm(e) {
				this.fm.ps.teamAdviceStatus = e[0].value
				this.fm.teamAdviceStatus = e[0].label
				this.teamAdviceStatus_off = false
			},
			teamAdviceTime_confirm(e) {
				this.fm.ps.teamAdviceTime = e.year + "-" + e.month + "-" + e.day + ' ' + e.hour + ':' + e.minute + ':' + e
					.second
				this.teamAdviceTime_off = false
			},
			onChange() {
				let that = this
				that.$u.api.findComboCusList({
					page: {
						pageNum: 1,
						pageSize: 999,
					},
					find: that.curval1,
					cusTypeMark: 'CARTEAM',
				}).then(res => {
					if (res.code == 1) {
						that.findComboCusList = res.data


					}
				});
			},
			picker_confirm1(e) {
				let that = this
				that.fm.ps.teamUserIdDeal = e.userId
				that.fm.teamUserIdDeal = e.cusCompanySimpleName
				that.show = false
			},
			// 关闭弹框
			closeMd() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 选择车队



			submitFm() {
				let that = this,
					U = that.U,
					FV = that.FV,
					fm = that.fm,
					ps = U.scopy(fm.ps),
					sb = fm.sb;
				that.$refs[fm.fname].validate((valid) => {
					if (!valid) {
						return false;
					} else {


						that.$u.api.followUpTravelAdviceByTeam(ps).then((res) => {
							sb.load = false;

							if (res.code == 1) {

								uni.$u.toast(res.msg);
								setTimeout(() => {
									uni.navigateBack({
										delta: 1,
									});
								}, 1000);

							} else {
								U.qerror(res.msg);
							}
						}).catch(err => {
							sb.load = false;
						});


					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.picker_css {

		width: 100vw;
		height: 100vh;
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
	}

	.list-content {
		height: calc(100vh - 150rpx);
		overflow: auto;
		margin-top: 10rpx;

		.point-item {
			border-bottom: 2rpx solid #efefef;
			line-height: 44rpx;
			padding: 10rpx 60rpx 10rpx 20rpx;
			position: relative;

			.point-name {
				display: flex;
				font-weight: 600;
				font-size: 30rpx;
				color: #333;
			}

			.point-address {
				color: #999;
				font-size: 26rpx;
			}

			.point-collect {
				top: calc((100% - 40rpx)/2);
				right: 20rpx;
				position: absolute;
			}
		}
	}
</style>